<article class="speakerslist <% if (pageID == 'home') { %>jumbotron hidden-xs<% } %>">
    <div class="container">
        <div class="row">

            <!--通过遍历speakers数据源，来动态生成div组内容-->
            <% speakers.forEach(function(item) { %>

            <div class="<% if (pageID == 'home') { %>col-sm-4 text-center<% } else { %>col-sm-8 <% } %>">
                <h3 class="speakerslist-title"><%= item.title %></h3>
                <h5 class="speakerslist-name">with <a href="/speakers/<%= item.shortname %>"><%= item.name %></a></h5>
                <p class="speakerslist-info">
                    <a href="/speakers/<%= item.shortname %>">

                        <% if (pageID == 'home') { %>
                        <img class="speakerslist-img img-circle" src="/images/speakers/<%= item.shortname %>_tn.jpg"
                             alt="Photo of <%= item.name %>">
                    </a>
                    <% } %>

                    <% if (pageID == 'speakerList') { %>
                    <img class="speakerslist-img img-circle pull-left"
                         src="/images/speakers/<%= item.shortname %>_tn.jpg" alt="Photo of <%= item.name %>">
                    </a>
                    <% } %>
                    </a>

                    <% if (pageID == 'speakerDetail') { %>
                    <img class="speakerslist-img img-responsive pull-left"
                         src="/images/speakers/<%= item.shortname %>.jpg" alt="Photo of <%= item.name %>">
                    </a>
                    <% } %>
                    </a>

                    <% if (pageID !== 'home') { %>
                    <% if (pageID == 'speakerList') { %>
                    <%= item.summary %>
                    <% } else { %>
                    <%- item.description %>
                    <% } %>
                    <% } %>
                </p>
            </div>
            <% }); %>
        </div>
    </div>
</article>
